<template>
	<view class="Caddress">
		<view v-if="defaultIndex === -1" class="Caddress-null flex" @click="openAddressPopup">
			<view class="flex mt15 mb15">
				<u-icon name="map-fill" size="38rpx" color="#ea64a2" />
				<text class="ml15">请选择收货地址</text>
			</view>
			<u-icon name="arrow-right" size="38rpx" />
		</view>
		<view v-else class="Caddress-item flex" @click="openAddressPopup">
			<view class="Caddress-item-content flex mr10">
				<u-icon name="map-fill" size="38rpx" color="#ea64a2" />
				<view class="flexCol fs14 ml10">
					<view class="flex">
						<text class="mr10">{{ tableData[defaultIndex].name }}</text>
						<text>{{ tableData[defaultIndex].phone }}</text>
						<u-tag v-if="tableData[defaultIndex].isDefault" text="默认" type="error" size="mini"  plain plainFill />
					</view>
					<view class="mt5">{{ tableData[defaultIndex] | addressDetails }}</view>
				</view>
			</view>
			<u-icon name="arrow-right" size="38rpx" />
		</view>
		<u-popup :show="visible" mode="top" closeable bgColor="#ebebeb" @close="closeAddressPopup" @open="openAddressPopup">
			<scroll-view :scroll-y="true" :style="{ height: `${windowHeight}px` }">
			<view class="Caddress-popup">
				<view class="flexCenter mb20 mt10" style="color: #ea64a2;">
					请选择收货地址
				</view>
				<template v-if="tableData.length > 0">
					<view v-for="(item,index) in tableData" :key="index" class="Caddress-popup-item flex mb20" @click="setDefaultIndex(index)">
						<view class="Caddress-popup-item-content flex mr10">
							<u-icon name="map-fill" size="38rpx" color="#ea64a2" />
							<view class="flexCol fs14 ml10">
								<view class="flex">
									<text class="mr10">{{ item.name }}</text>
									<text>{{ item.phone }}</text>
									<u-tag v-if="item.isDefault" text="默认" type="error" size="mini"  plain plainFill />
								</view>
								<view class="mt5">{{ item | addressDetails }}</view>
							</view>
						</view>
						<u-icon name="arrow-right" size="38rpx" />
					</view>
				</template>
				<template v-else>
					<view style="color: #fa3534;" class="flexCenter mt20 mb20">未创建您的收货地址</view>
				</template>
				<view class="Caddress-popup-menu mb20">
					<u-button text="新建收货地址" icon="plus" iconColor="#fff" @click="toAddressModify" />
				</view>
			</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"Caddress",
		options: {
			styleIsolation: 'shared'
		}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		filters: {
			addressDetails(item) {
				return `${item.province}${item.city}${item.county}${item.addressDetail}`
			}
		},
		data() {
			return {
				windowHeight: 0, // 窗口高度
				visible: false,  // 弹窗开关
				defaultIndex: -1, // 默地址下标（已选择地址的下标）
				tableData: [], // 地址总数据
			};
		},
		created() {
			this.getAddressList() // 获取个人地址列表
		},
		mounted() {
			this.$nextTick(() => {
				this.getWindowsHeight()
			})
		},
		methods: {
			// 设置已选择地址的下标
			setDefaultIndex(index) {
				this.defaultIndex = index
				this.$emit('addressId', this.tableData[this.defaultIndex].id)
				this.closeAddressPopup()
			},
			// 获取窗口高度
			getWindowsHeight() {
				const app = uni.getSystemInfoSync()
				this.windowHeight = app.screenHeight // 窗口高度
			},
			// 跳转至修改地址页（增加页）
			toAddressModify() {
			  uni.navigateTo({
			    url: `/pages/address/modify/index?addressId=`,
			    animationType: "pop-in",
			    animationDuration: 200,
			  });
			},
			// 关闭地址选择弹窗
			closeAddressPopup() {
				this.visible = false
			},
			// 打开地址选择弹窗
			openAddressPopup() {
				this.visible = true
			},
			// 获取数据
			async getAddressList() {
				const { code, data } = await this.$address.addressGetList()
				if (code === 0) {
					this.tableData = data
					this.defaultIndex = this.tableData.findIndex(item => item.isDefault) // 默认地址下标
					this.defaultIndex !== -1 && this.$emit('addressId', this.tableData[this.defaultIndex].id)
					console.log(this.tableData)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.Caddress{
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	background-color: #FFFFFF;
	color: #606266;
	&-null{
		justify-content: space-between;
	}
	&-item{
		padding: 10rpx;
		justify-content: space-between;
		&-content{
			/deep/ .u-tag{
				width: fit-content;
				margin-left: 10rpx !important;
			}
		}
	}
	&-popup{
		padding: 20rpx;
		&-item{
			background-color: #FFFFFF;
			border-radius: 6rpx;
			padding: 20rpx;
			justify-content: space-between;
			&-content{
				/deep/ .u-tag{
					margin-left: 10rpx !important;
					width: fit-content;
				}
			}
		}
		&-item:active{
			background-color: #f4f4f5;
		}
		&-menu{
			/deep/ .u-button {
			  background-color: $uni-color-primary;
			  color: #fff;
			  border-radius: 20rpx;
			}
		}
	}
}
.Caddress:active{
	background-color: #f4f4f5;
}
</style>
